import React, { useState, useEffect, Fragment } from 'react';
import {
  Space,
  Table,
  Tag,
  Button,
  Pagination,
  Input,
  Form,
  Checkbox,
} from 'antd';
import axios from 'axios';
import up from './up.less';
import './up.less';
import { CloseOutlined, InfoOutlined } from '@ant-design/icons';
export default function index() {
  const columns = [
    {
      title: '序号',
      width: '18%',
      render: (text, record, index) => `${index + 1}`,
    },
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      render: (text) => <a>{text}</a>,
      onFilter: (value, record) => record.username.includes(value),
      sorter: (a, b) => a.username.length - b.username.length,
    },
  ];
  const [data, setdata] = useState([]);

  useEffect(() => {
    getUser();
  }, []);
  const getUser = async () => {
    let { data } = await axios.get(
      `http://127.0.0.1:7777/users/userlist/?page=1&pagesize=100`,
    );
    setdata(data.userlist);
  };
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [username, setusername] = useState();
  const [password, setpassword] = useState('');

  const [count, setCount] = useState(0);
  const onSelectChange = (newSelectedRowKeys, selectedRows) => {
    setSelectedRowKeys(newSelectedRowKeys);

    setusername(selectedRows[0].username);
  };
  useEffect(() => {
    console.log(username);
  }, [username]);
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
    type: 'radio',
  };

  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  // 控制账号密码错误弹出div的显示和隐藏
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 控制提示的信息
  const [usermsg, setusermsg] = useState();

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const save = async () => {
    let obj = {
      _id: selectedRowKeys[0],
      username: username,
      password: password,
    };
    await axios.put(`http://127.0.0.1:7777/users/setpw`, obj);
    setIsModalOpen(true);
    setusermsg('密码修改成功');
    setSelectedRowKeys([]);
    setusername('');
    setpassword('');
  };
  return (
    <Fragment>
      <div className="user_contain">
        <div className="usermenu">
          <Button className="user_btn" onClick={save}>
            保存
          </Button>
          <div className={up.up_content}>
            <Table
              className={up.tab}
              columns={columns}
              rowKey={(record) => record._id}
              pagination={false}
              dataSource={data}
              size="small"
              rowSelection={rowSelection}
              scroll={{ y: '1000px' }}
            />
            <Form
              name="basic"
              labelCol={{
                span: 6,
              }}
              wrapperCol={{
                span: 17,
              }}
              style={{
                maxWidth: 600,
              }}
              initialValues={{
                username,
              }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
              <Form.Item label="用户名">
                <Input value={username} disabled />
              </Form.Item>
              <Form.Item label="新密码" name="password">
                <Input.Password
                  onChange={(value) => {
                    let pw = value.target.value;
                    setpassword(pw);
                  }}
                />
              </Form.Item>
              <Form.Item label="确认密码" name="newpassword">
                <Input.Password />
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
      <div className="logininfo" style={{ display: isModalOpen ? '' : 'none' }}>
        <div className="logininfotop">
          <p>提示对话框</p>
          <span className="logininfotopcha" onClick={handleOk}>
            <CloseOutlined />
          </span>
        </div>
        <div className="logininfocenter">
          <span className="logininfocentertu">
            <InfoOutlined style={{ color: 'white' }} />
          </span>
          <p>{usermsg}</p>
        </div>
        <div className="logininfobottom">
          <button onClick={handleOk}>确定</button>
        </div>
      </div>
      {/* 遮罩层 */}
      <div
        className="cover"
        style={{ display: isModalOpen ? '' : 'none' }}
      ></div>
    </Fragment>
  );
}
